Previous Page Go to Menu
オープンソースによる地図表示（Leaflet編）追加分 その２（続き）
2019/5/25 by T. Fujita
追加－２－２、写真付マーカーで撮影地を地図上に表示する
次にマーカーで遊んでみましょう。 マーカーとしてフォトフレーム付き写真を表示させてみます。 これまでと同様に表示されたマーカーをクリックすると当該写真がポップアップで表示されます。
なお、PC上の「Safari」では動作しませんでしたが、Android 7.0 及び iOS 12.2 での動作は確認しています。 以下にその表示例とソースファイルの内容を示します。 ソースファイルの内容では、追加・変更した部分を赤字で表示しました。
『Leaflet_Tutrial_Additional_004.html』の始めに記載したスタイルシートで、フォトフレーム及び写真のサイズと重ね合わせ位置等を規定しています。 ここでは、フォトフレームの足元の位置が地図上の写真撮影地としています。
使用するフォトフレーム及び写真については、『Dialog_Additional_004.js』の変数「photoIcon」、「photoIcon_01」、「photoIcon_02」で指定しており、これまでマーカー表示を指定していた L.icon()の代わりに L.divIcon()を使用してhtmlで表示する画像を記載しています。
単独で表示する場合は、『
Leaflet_Tutrial_Additional_004.html 』をクリックして下さい。
写真付マーカーで撮影地を地図上に表示する例
『 Leaflet_Tutrial_Additional_004.html 』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title>Leaflet_Tutrial_Additional_004.html 2019/5/25 by T. Fujita</title>
005 <meta charset = "utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
008 <link rel = "stylesheet" href = "./Plugins/ms-Dropdown-master/css/msdropdown/dd.css" />
009 <link rel = "stylesheet" href = "./CSS/scroll_menu.css" />
010 <link rel = "stylesheet" href = "./CSS/Original_Style_404.css" />
011
012 <style>
013 html, body {
014 width: 99%;
015 height: 98%;
016 font-size: 14px;
017 z-index: 0;
018 }
019
020 form img {
021 height: 100px;
022 order: 1;
023 }
024
025 .imageCover1 {
026 position: relative;
027 width: 100px;
028 height: 217px;
029 }
030
031 .imageCover1 .baseImage {
032 position: absolute;
033 left: -50px;
034 top: -217px;
035 width: 100px;
036 height: 56px;
037 }
038
039 .imageCover1 .coverImage {
040 position: absolute;
041 left: -50px;
042 top: -217px;
043 width: 100px;
044 height: 217px;
045 }
046
047 .imageCover2 {
048 position: relative;
049 width: 75px;
050 height: 260px;
051 }
052
053 .imageCover2 .baseImage {
054 position: absolute;
055 left: -38px;
056 top: -260px;
057 width: 75px;
058 height: 87px;
059 }
060
061 .imageCover2 .coverImage {
062 position: absolute;
063 left: -38px;
064 top: -260px;
065 width: 75px;
066 height: 260px;
067 }
068
069 </style>
070
071 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
072 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
073 <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
074 <script src = "https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.2.1/exif.min.js"></script>
075 <script src = "./Plugins/ms-Dropdown-master/js/msdropdown/jquery.dd.js"></script>
076 <script src = "./JS/Dialog_Additional_004.js" ></script>
077 <script>
078 var Marker_LAT = new Array();
079 var Marker_LON = new Array();
080 var Marker_NAM = new Array();
081 var Marker_LNK = new Array();
082 var Marker_ICN = new Array();
083 var Marker_ID = new Array();
084 var Marker_Drag_flag = new Array();
085 var Marker_Drag_info = new Array();
086 var ClickLat = null;
087 var ClickLon = null;
088 var Marker_count = 0;
089 var Marker_ID_count = 0;
090 var SelectedID;
091 var Marker_flag = 0;
092 var Temp_shape, Temp_shape_clone;
093 var Temp, Temp_LAT, Temp_LON, Temp_NAM, Temp_LNK, Temp_ICN, Temp_ID;
094 var Temp_Drag_flag, Temp_Drag_info;
095 var Layer_404 = new Array();
096 var Layer_404_clone = new Array();
097 var Dialog_flag_001 = 0;
098 var Photo_Marker_LAT = new Array();
099 var Photo_Marker_LON = new Array();
100 var Photo_Marker_NAM = new Array();
101 var Photo_Marker_LNK = new Array();
102 var Photo_Marker_ICN = new Array();
103 var Photo_Marker_ID = new Array();
104 var Photo_Marker_Drag_flag = new Array();
105 var Photo_Marker_Drag_info = new Array();
106 var Photo_Marker_count = 0;
107 var Photo_Marker_ID_count = 0;
108 var Layer_AD004 = new Array();
109 var Layer_AD004_clone = new Array();
110 var map_AD004;
111
112 function init() {
113 map_AD004 = L.map('map_AD004').setView([35.0, 137.0], 6);
114 mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
115 L.tileLayer(
116 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
117 attribution: 'Map data © ' + mapLink,
118 maxZoom: 18
119
120 // 'https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
121 // attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
122 }).addTo(map_AD004);
123 map_AD004.on('click', function(e) {
124 ClickLat = e.latlng.lat;
125 ClickLon = e.latlng.lng;
126 if ( Marker_flag == 1 ) { Leaflet_Marker_401(); }
127 if ( Marker_flag == 2 ) { Leaflet_Marker_403(); }
128 });
129 }
130
131 function Leaflet_Marker_400() { // 初期設定（マーカー単独設置）
132 ClickLat = null;
133 ClickLon = null;
134 Marker_flag = 1;
135 }
136
137 function Leaflet_Marker_401() { // マーカー単独設置
138 if(Marker_flag == 1) {
139 Marker_LAT[ Marker_count ] = ClickLat;
140 Marker_LON[ Marker_count ] = ClickLon;
141 Marker_NAM[ Marker_count ] = Set_Text;
142 Marker_LNK[ Marker_count ] = " ";
143 Marker_ICN[ Marker_count ] = L.icon({
144 iconUrl: Icon_Url,
145 iconSize: [Icon_W, Icon_H],
146 iconAnchor : [Icon_AW, Icon_AH],
147 popupAnchor: [Icon_PW, Icon_PH]
148 });
149 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
150 Marker_Drag_flag[ Marker_count ] = true;
151 Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
152 Temp = Marker_count;
153 Marker_setting();
154 Marker_set();
155 Layer_404[ Temp ] = Temp_shape;
156 Layer_404[ Temp ].addTo(map_AD004);
157 Layer_404_clone[ Temp ] = Temp_shape_clone;
158 Layer_404_clone[ Temp ].addTo(map_AD004);
159 Marker_count = Marker_count + 1;
160 Marker_ID_count = Marker_ID_count + 1;
161 Marker_flag = 0;
162 }
163 }
164
165 function Leaflet_Marker_402() { // 初期設定（マーカー連続設置）
166 ClickLat = null;
167 ClickLon = null;
168 Marker_flag = 2;
169 }
170
171 function Leaflet_Marker_403() { // マーカー連続設置
172 if(Marker_flag == 2) {
173 Marker_LAT[ Marker_count ] = ClickLat;
174 Marker_LON[ Marker_count ] = ClickLon;
175 Marker_NAM[ Marker_count ] = Set_Text;
176 Marker_LNK[ Marker_count ] = " ";
177 Marker_ICN[ Marker_count ] = L.icon({
178 iconUrl: Icon_Url,
179 iconSize: [Icon_W, Icon_H],
180 iconAnchor : [Icon_AW, Icon_AH],
181 popupAnchor: [Icon_PW, Icon_PH]
182 });
183 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
184 Marker_Drag_flag[ Marker_count ] = true;
185 Marker_Drag_info[ Marker_count ] = "マウスで移動出来ます。";
186 Temp = Marker_count;
187 Marker_setting();
188 Marker_set();
189 Layer_404[ Temp ] = Temp_shape;
190 Layer_404[ Temp ].addTo(map_AD004);
191 Layer_404_clone[ Temp ] = Temp_shape_clone;
192 Layer_404_clone[ Temp ].addTo(map_AD004);
193 Marker_count = Marker_count + 1;
194 Marker_ID_count = Marker_ID_count + 1;
195 }
196 }
197
198 function Leaflet_Marker_404() { // マーカー連続設置終了
199 Marker_flag = 0;
200 }
201
202 function Leaflet_Marker_405() { // マーカー全消去
203 var j = Layer_404.length - 1;
204 for(i = 0; i <= j; i++) {
205 if(Layer_404[i] != null) {
206 map_AD004.removeLayer(Layer_404[i]);
207 map_AD004.removeLayer(Layer_404_clone[ i ]);
208 }
209 }
210 Marker_count = 0;
211 Marker_LAT = new Array();
212 Marker_LON = new Array();
213 Marker_NAM = new Array();
214 Marker_LNK = new Array();
215 Marker_ICN = new Array();
216 }
217
218 function Leaflet_Marker_406() { // マーカー保存（CSV形式）
219 for (i = 0; i <= (Marker_LON.length - 1); i++) {
220 if( !isNaN(Marker_LON[ i ]) ) {
221 while( (Marker_LON[ i ] * 1.0) < -180) {
222 Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) + 360;
223 }
224 while( (Marker_LON[ i ] * 1.0) > 180) {
225 Marker_LON[ i ] = (Marker_LON[ i ] * 1.0) - 360;
226 }
227 }
228 }
229 if(Marker_LAT[ 0 ] == "LAT(deg.)") {
230 var CSV_content = [];
231 } else {
232 var CSV_content = "LAT(deg.),LONG(deg.),Name(by utf-8),Link,\r\n";
233 }
234 const aTag = document.createElement('a');
235 aTag.download = "CSV_Data.csv";
236 var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
237 Temp = Marker_LAT.length;
238 for ( i = 0; i < Temp; i++ ) {
239 if( Marker_LAT[ i ] != "" && Marker_LON[ i ] != "" ) {
240 CSV_content = CSV_content + Marker_LAT[ i ] + "," + Marker_LON[ i ] + "," + Marker_NAM[ i ] + "," + Marker_LNK[ i ] + ",\r\n";
241 }
242 }
243 var blob = new Blob([ bom, CSV_content ], { "type": "text/csv"});
244 if(window.navigator.msSaveBlob) {
245 window.navigator.msSaveBlob(blob, aTag.download); // for IE
246 } else if (window.URL && window.URL.createObjectURL) {
247 aTag.href = window.URL.createObjectURL(blob); // for FireFox
248 document.body.appendChild(aTag);
249 aTag.click();
250 document.body.removeChild(aTag);
251 } else if (window.webkitURL && window.webkitURL.createObject) {
252 aTag.href = (window.URL || window.webkitURL).createObjectURL(blob); // for Chrome
253 aTag.click();
254 } else {
255 alert("保存に失敗しました！");
256 }
257 }
258
259 function Leaflet_Marker_407() { // マーカー読込（CSV形式）
260 Dialog_002();
261 }
262
263 function Marker_setting() { // マーカー設定
264 Temp_LAT = Marker_LAT[ Temp ] * 1.0;
265 Temp_LON = Marker_LON[ Temp ] * 1.0;
266 Temp_NAM = Marker_NAM[ Temp ];
267 Temp_LNK = Marker_LNK[ Temp ];
268 Temp_ICN = Marker_ICN[ Temp ];
269 Temp_ID = Marker_ID[ Temp ];
270 Temp_Drag_flag = Marker_Drag_flag[ Temp ]
271 Temp_Drag_info = Marker_Drag_info[ Temp ]
272 Set_Link =" ";
273 if(Temp_LNK != undefined ) {
274 if( String( Temp_LNK ).length > 5 ) {
275 Set_Link = "<a href= '" + Temp_LNK + "' target='_blank'> " + Temp_NAM + "情報にリンク</a>";
276 }
277 }
278 }
279
280 function Marker_set() { // マーカー設置
281 if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
282 if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) {
283 if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
284 Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
285 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
286 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
287 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
288 Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
289 if(Temp_LON >= 0) {
290 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
291 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
292 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
293 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
294 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
295 } else {
296 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
297 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
298 "<p> <input type='button' value='Change this Marker' class='marker-change-button'/></p>" +
299 Set_Link + "<p> <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
300 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
301 }
302 }
303 }
304 }
305 }
306
307 function onMarkerOpen() { // マーカーをクリックした時に表示する削除ボタンと変更ボタン
308 var tempMarker = this;
309 SelectedID = tempMarker.options.id;
310 $(".marker-delete-button:visible").click(function () {
311 if(SelectedID.slice(0,5) =="Photo") {
312 Photo_Marker_DEL(tempMarker);
313 } else {
314 Marker_DEL(tempMarker);
315 }
316 });
317 $(".marker-change-button:visible").click(function () {
318 Dialog_001();
319 });
320 }
321
322 function Change_Marker() { // 変更ボタン押下時の処理
323 for(i = 0; i <= Marker_count; i++) {
324 if(SelectedID == Marker_ID[ i ] ) {
325 if(Set_Text !="") {
326 Marker_NAM[ i ] = Set_Text;
327 }
328 Marker_ICN[ i ] = L.icon({
329 iconUrl: Icon_Url,
330 iconSize: [Icon_W, Icon_H],
331 iconAnchor : [Icon_AW, Icon_AH],
332 popupAnchor: [Icon_PW, Icon_PH]
333 });
334 }
335 }
336 for(i = 0; i <= Photo_Marker_count; i++) {
337 if(SelectedID == Photo_Marker_ID[ i ] ) {
338 if(Set_Text !="") {
339 Photo_Marker_NAM[ i ] = Set_Text;
340 }
341 Photo_Marker_ICN[ i ] = L.icon({
342 iconUrl: Icon_Url,
343 iconSize: [Icon_W, Icon_H],
344 iconAnchor : [Icon_AW, Icon_AH],
345 popupAnchor: [Icon_PW, Icon_PH]
346 });
347 }
348 }
349 Marker_Refresh();
350 Photo_Marker_Refresh();
351 }
352
353 function Marker_DEL(tempMarker) { // 削除ボタン押下時の処理
354 var k = 0;
355 Marker_flag = 0;
356 Marker_LAT[ Marker_count + 1 ] = "";
357 Marker_LON[ Marker_count + 1 ] = "";
358 Marker_NAM[ Marker_count + 1 ] = "";
359 Marker_LNK[ Marker_count + 1 ] = "";
360 Marker_ICN[ Marker_count + 1 ] = "";
361 Marker_ID[ Marker_count + 1 ] = "";
362 SelectedID = tempMarker.options.id;
363 for(i = 0; i <= Marker_count; i++) {
364 if(SelectedID == Marker_ID[ i ] ) {
365 for(k = i; k <= Marker_count; k++) {
366 Marker_LAT[ k ] = Marker_LAT[ k + 1 ];
367 Marker_LON[ k ] = Marker_LON[ k + 1 ];
368 Marker_NAM[ k ] = Marker_NAM[ k + 1 ];
369 Marker_LNK[ k ] = Marker_LNK[ k + 1 ];
370 Marker_ICN[ k ] = Marker_ICN[ k + 1 ];
371 Marker_ID[ k ] = Marker_ID[ k + 1 ];
372 Marker_Drag_flag[ k ] = Marker_Drag_flag[ k + 1 ];
373 Marker_Drag_info[ k ] = Marker_Drag_info[ k + 1 ];
374 }
375 }
376 }
377 SelectedID = null;
378 Marker_count = Marker_count - 1;
379 Marker_Refresh();
380 }
381
382 function Photo_Marker_DEL(tempMarker) { // 削除ボタン押下時の処理（写真用マーカー）
383 var k = 0;
384 Marker_flag = 0;
385 Photo_Marker_LAT[ Photo_Marker_count + 1 ] = "";
386 Photo_Marker_LON[ Photo_Marker_count + 1 ] = "";
387 Photo_Marker_NAM[ Photo_Marker_count + 1 ] = "";
388 Photo_Marker_LNK[ Photo_Marker_count + 1 ] = "";
389 Photo_Marker_ICN[ Photo_Marker_count + 1 ] = "";
390 Photo_Marker_ID[ Photo_Marker_count + 1 ] = "";
391 SelectedID = tempMarker.options.id;
392 for(i = 0; i <= Photo_Marker_count; i++) {
393 if(SelectedID == Photo_Marker_ID[ i ] ) {
394 for(k = i; k <= Photo_Marker_count; k++) {
395 Photo_Marker_LAT[ k ] = Photo_Marker_LAT[ k + 1 ];
396 Photo_Marker_LON[ k ] = Photo_Marker_LON[ k + 1 ];
397 Photo_Marker_NAM[ k ] = Photo_Marker_NAM[ k + 1 ];
398 Photo_Marker_LNK[ k ] = Photo_Marker_LNK[ k + 1 ];
399 Photo_Marker_ICN[ k ] = Photo_Marker_ICN[ k + 1 ];
400 Photo_Marker_ID[ k ] = Photo_Marker_ID[ k + 1 ];
401 Photo_Marker_Drag_flag[ k ] = Photo_Marker_Drag_flag[ k + 1 ];
402 Photo_Marker_Drag_info[ k ] = Photo_Marker_Drag_info[ k + 1 ];
403 }
404 }
405 }
406 SelectedID = null;
407 Photo_Marker_count = Photo_Marker_count - 1;
408 Photo_Marker_Refresh();
409 }
410 function Marker_Refresh() { // マーカー再表示
411 var j = Layer_404.length - 1;
412 for(i = 0; i <= j; i++) {
413 if(Layer_404[ i ] != null) {
414 map_AD004.removeLayer(Layer_404[ i ]);
415 map_AD004.removeLayer(Layer_404_clone[ i ]);
416 }
417 }
418 for (i = 0; i <= Marker_count - 1; i++)
419 {
420 Temp = i;
421 Marker_setting();
422 Marker_set();
423 Layer_404[ Temp ] = Temp_shape;
424 Layer_404[ Temp ].addTo(map_AD004);
425 Layer_404_clone[ Temp ] = Temp_shape_clone;
426 Layer_404_clone[ Temp ].addTo(map_AD004);
427 }
428 }
429
430 function Photo_Marker_Refresh() { // 写真用マーカー再表示
431 var j = Layer_AD004.length - 1;
432 for(i = 0; i <= j; i++) {
433 if(Layer_AD004[ i ] != null) {
434 map_AD004.removeLayer(Layer_AD004[ i ]);
435 map_AD004.removeLayer(Layer_AD004_clone[ i ]);
436 }
437 }
438 for (i = 0; i <= Photo_Marker_count - 1; i++)
439 {
440 Temp = i;
441 Photo_Marker_Setting();
442 Photo_Marker_Set();
443 Layer_AD004[ Temp ] = Temp_shape;
444 Layer_AD004[ Temp ].addTo(map_AD004);
445 Layer_AD004_clone[ Temp ] = Temp_shape_clone;
446 Layer_AD004_clone[ Temp ].addTo(map_AD004);
447 }
448 }
449
450 function Dragging() { // マーカーをドラッグ時の位置取得
451 ClickLat = this._latlng.lat;
452 ClickLon = this._latlng.lng;
453 SelectedID = this.options.id;
454 if(SelectedID.slice(0,5) == "Photo") {
455 for(i = 0; i <= Photo_Marker_count; i++) {
456 if(SelectedID == Photo_Marker_ID[ i ] ) {
457 Photo_Marker_LAT[ i ] = ClickLat;
458 Photo_Marker_LON[ i ] = ClickLon;
459 }
460 }
461 Photo_Marker_Refresh();
462 } else {
463 for(i = 0; i <= Marker_count; i++) {
464 if(SelectedID == Marker_ID[ i ] ) {
465 Marker_LAT[ i ] = ClickLat;
466 Marker_LON[ i ] = ClickLon;
467 }
468 }
469 Marker_Refresh();
470 }
471 SelectedID = null;
472 }
473
474 function CSV_Markers() { // CSVデータを表示
475 for (i = 0; i <= (Data_CSV.length - 1); i++) {
476 if((Data_CSV[i][0] * 1.0) > 90) {
477 Data_CSV[i][0] = 90;
478 }
479 if((Data_CSV[i][0] * 1.0) < -90) {
480 Data_CSV[i][0] = -90;
481 }
482 while( (Data_CSV[i][1] * 1.0) < -180) {
483 Data_CSV[i][1] = Data_CSV[i][1] * 1.0 + 360;
484 }
485 while( (Data_CSV[i][1] * 1.0) > 180) {
486 Data_CSV[i][1] = Data_CSV[i][1] * 1.0 - 360;
487 }
488 }
489 for (i = 0; i <= (Data_CSV.length - 1); i++) {
490 Marker_LAT[ Marker_count ] = Data_CSV[i][0];
491 Marker_LON[ Marker_count ] = Data_CSV[i][1];
492 Marker_NAM[ Marker_count ] = Data_CSV[i][2];
493 Marker_LNK[ Marker_count ] = Data_CSV[i][3];
494 Marker_ICN[ Marker_count ] = L.icon({
495 iconUrl: Icon_Url,
496 iconSize: [Icon_W, Icon_H],
497 iconAnchor : [Icon_AW, Icon_AH],
498 popupAnchor: [Icon_PW, Icon_PH]
499 });
500 Marker_ID[ Marker_count ] = "Marker" + Marker_ID_count;
501 Marker_Drag_flag[ Marker_count ] = false;
502 Marker_Drag_info[ Marker_count ] = "移動出来ません。";
503 if( Data_CSV[i][0] != "" ) {
504 if( !isNaN( Data_CSV[i][0] ) ) {
505 Temp = Marker_count;
506 Marker_setting();
507 Marker_set();
508 Layer_404[ Temp ] = Temp_shape;
509 Layer_404[ Temp ].addTo(map_AD004);
510 Layer_404_clone[ Temp ] = Temp_shape_clone;
511 Layer_404_clone[ Temp ].addTo(map_AD004);
512 Marker_count = Marker_count + 1;
513 Marker_ID_count = Marker_ID_count + 1;
514 }
515 }
516 }
517 }
518
519 function Leaflet_Photo_001() { // 写真ファイル読込
520 Dialog_Additional_003();
521 }
522
523 function Leaflet_Photo_002() { // 写真用マーカー全消去
524 var j = Layer_AD004.length - 1;
525 for(i = 0; i <= j; i++) {
526 if(Layer_AD004[i] != null) {
527 map_AD004.removeLayer(Layer_AD004[i]);
258 map_AD004.removeLayer(Layer_AD004_clone[ i ]);
529 }
530 }
531 Photo_Marker_count = 0;
532 Photo_Marker_LAT = new Array();
533 Photo_Marker_LON = new Array();
534 Photo_Marker_NAM = new Array();
535 Photo_Marker_LNK = new Array();
536 Photo_Marker_ICN = new Array();
537 }
538
539 function Photo_Marker_Setting() { // 写真用マーカー設定
540 Temp_LAT = Photo_Marker_LAT[ Temp ] * 1.0;
541 Temp_LON = Photo_Marker_LON[ Temp ] * 1.0;
542 Temp_NAM = Photo_Marker_NAM[ Temp ];
543 Temp_LNK = Photo_Marker_LNK[ Temp ];
544 Temp_ICN = Photo_Marker_ICN[ Temp ];
545 Temp_ID = Photo_Marker_ID[ Temp ];
546 Temp_Drag_flag = Photo_Marker_Drag_flag[ Temp ]
547 Temp_Drag_info = Photo_Marker_Drag_info[ Temp ]
548 Set_Link =" ";
549 }
550
551 function Photo_Marker_Set() { // 写真用マーカー設置
552 if( !isNaN( Temp_LAT ) && !isNaN( Temp_LON ) ) {
553 if( (Temp_LAT !== undefined) || (Temp_LAT !== "") ) {
554 if( ((Temp_LAT * 1.0) != 0) || ((Temp_LON * 1.0) != 0) ) {
555 Temp_shape = L.marker([ Temp_LAT, Temp_LON ],
556 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
557 "<p><center> <img src = '" + window.URL.createObjectURL(Temp_LNK) + "' width='300'></center></p>" +
558 " <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
559 Temp_shape.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
560 if(Temp_LON >= 0) {
561 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON - 360) ],
562 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
563 "<p><center> <img src = '" + window.URL.createObjectURL(Temp_LNK) + "' width='300'></center></p>" +
564 " <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
565 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
566 } else {
567 Temp_shape_clone = L.marker([ Temp_LAT, (Temp_LON + 360) ],
568 {icon: Temp_ICN, id: Temp_ID, draggable: Temp_Drag_flag}).bindPopup( Temp_NAM + "<BR>" + Temp_Drag_info + "<BR>" +
569 "<p><center> <img src = '" + window.URL.createObjectURL(Temp_LNK) + "' width='300'></center></p>" +
570 " <input type='button' value='Delete this Marker' class='marker-delete-button'/></p>");
571 Temp_shape_clone.on('popupopen', onMarkerOpen ).on('dragend', Dragging);
572 }
573 }
574 var image = document.createElement('img');
575 image.src = window.URL.createObjectURL(Temp_LNK);
576 }
577 }
578 }
579
580 </script>
581 </head>
582 <body onload="init()">
583 <nav id="menu-wrap" style="z-index: 1000;">
584 <ul id="menu" style="width: 98%;">
585 <li><a href="#">マーカー設定</a>
586 <ul>
587 <li><a href="#" onclick = "Dialog_001()">マーカーのスタイル設定</a></li>
588 <li><a href="#" onclick = "Leaflet_Marker_400()">マーカー単独設置 </a></li>
589 <li><a href="#" onclick = "Leaflet_Marker_402()">マーカー連続設置 </a></li>
590 <li><a href="#" onclick = "Leaflet_Marker_404()">マーカー連続設置終了 </a></li>
591 <li><a href="#" onclick = "Leaflet_Marker_405()">マーカー全消去 </a></li>
592 <li><a href="#" onclick = "Leaflet_Marker_406()">マーカー保存（CSV形式） </a></li>
593 <li><a href="#" onclick = "Leaflet_Marker_407()">マーカー読込（CSV形式） </a></li>
594 </ul>
595 </li>
596 <li><a href="#">写真の撮影地表示</a>
597 <ul>
598 <li><a href="#" onclick = "Leaflet_Photo_001()">写真ファイル読込 </a></li>
599 <li><a href="#" onclick = "Leaflet_Photo_002()">写真用マーカー全消去 </a></li>
600 </ul>
601 </li>
602 </ul>
603 </nav>
604 <div id="map_Layer">
605 <div id="map_AD004" style="width: 100%; height: 95%; border: solid 1px"></div>
606 ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および
607 <A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、これらアイコン素材データの著作権は TopeconHeroes が保持しています。
608 </div>
609 </body>
610 </html>
『 Dialog_Additional_004.js 』は、『Dialog_Additional_003.js』を元に写真付マーカーを表示する機能に変更した JavaScriptファイルです。
追加・変更した箇所は赤字で表示しており、写真が横長か縦長かで使用するフォトフレームを変更するようにしました。
『 Dialog_Additional_004.js 』のソースファイル内容
001 // Dialog_Additional_004.js 2019/5/25 by T. Fujita
002
003 var Set_Text = "";
004 var Set_Link = " ";
005 var Icon_Url = "../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png";
006 var Icon_W = 24;
007 var Icon_H = 24;
008 var Icon_AW = Math.round(Icon_W / 2);
009 var Icon_AH = Math.round(Icon_H / 2);
010 var Icon_PW = 0;
011 var Icon_PH = Math.round(Icon_H / 2) * -1;
012 var Max_M_Size = 64;
013 var Min_M_Size = 8;
014 var Data_CSV = new Array();
015 var Photo_file = new Array();
016 var file;
017 var photoIcon;
018
019 $(document).ready( function() {
020 $("body").append('<div id="dialog_001" style="z-index: 2000;"><p><form name="Form_001"> Title: '+
021 '<input type="text" style="width: 230px;" name="txt_mk" value=""></form><BR>'+
022 '<div>Marker Select:<BR>'+
023 '<select id="Marker_Samples" name="Marker_Samples" style="width:150px;">'+
024 '<option value="1" title="../ICONS/BW_Icon/BW_Icons_64/icon_000200_64.png">001</option>'+
025 '<option value="2" title="../ICONS/BW_Icon/BW_Icons_64/icon_127890_64.png">002</option>'+
026 '<option value="3" title="../ICONS/BW_Icon/BW_Icons_64/icon_114880_64.png">003</option>'+
027 '<option value="4" title="../ICONS/BW_Icon/BW_Icons_64/icon_109890_64.png">004</option>'+
028 '<option value="5" title="../ICONS/BW_Icon/BW_Icons_64/icon_001050_64.png">005</option>'+
029 '<option value="6" title="../ICONS/BW_Icon/BW_Icons_64/icon_119170_64.png">006</option>'+
030 '<option value="7" title="../ICONS/BW_Icon/BW_Icons_64/icon_122590_64.png">007</option>'+
031 '<option value="8" title="../ICONS/BW_Icon/BW_Icons_64/icon_000220_64.png">008</option>'+
032 '<option value="9" title="../ICONS/BW_Icon/BW_Icons_64/icon_133000_64.png">009</option>'+
033 '<option value="10" title="../ICONS/BW_Icon/BW_Icons_64/icon_115740_64.png">010</option>'+
034 '<option value="11" title="../ICONS/BW_Icon/BW_Icons_64/icon_115710_64.png">011</option>'+
035 '<option value="12" title="../ICONS/BW_Icon/BW_Icons_64/icon_115750_64.png">012</option>'+
036 '<option value="13" title="../ICONS/BW_Icon/BW_Icons_64/icon_115720_64.png">013</option>'+
037 '<option value="14" title="../ICONS/BW_Icon/BW_Icons_64/icon_147060_64.png">014</option>'+
038 '<option value="15" title="../ICONS/BW_Icon/BW_Icons_64/icon_127900_64.png">015</option>'+
039 '<option value="16" title="../ICONS/BW_Icon/BW_Icons_64/icon_109850_64.png">016</option>'+
040 '<option value="17" title="../ICONS/BW_Icon/BW_Icons_64/icon_111050_64.png">017</option>'+
041 '<option value="18" title="../ICONS/BW_Icon/BW_Icons_64/icon_111060_64.png">018</option>'+
042 '<option value="19" title="../ICONS/BW_Icon/BW_Icons_64/icon_111520_64.png">019</option>'+
043 '<option value="20" title="../ICONS/BW_Icon/BW_Icons_64/icon_127100_64.png">020</option>'+
044 '<option value="21" title="../ICONS/BW_Icon/BW_Icons_64/icon_127110_64.png">021</option>'+
045 '<option value="22" title="../ICONS/BW_Icon/BW_Icons_64/icon_127120_64.png">022</option>'+
046 '<option value="23" title="../ICONS/BW_Icon/BW_Icons_64/icon_127130_64.png">023</option>'+
047 '<option value="24" title="../ICONS/BW_Icon/BW_Icons_64/icon_127140_64.png">024</option>'+
048 '<option value="25" title="../ICONS/BW_Icon/BW_Icons_64/icon_127150_64.png">025</option>'+
049 '<option value="26" title="../ICONS/BW_Icon/BW_Icons_64/icon_127160_64.png">026</option>'+
050 '<option value="27" title="../ICONS/BW_Icon/BW_Icons_64/icon_001720_64.png">027</option>'+
051 '<option value="28" title="../ICONS/BW_Icon/BW_Icons_64/icon_100590_64.png">028</option>'+
052 '<option value="29" title="../ICONS/BW_Icon/BW_Icons_64/icon_100600_64.png">029</option>'+
053 '<option value="30" title="../ICONS/BW_Icon/BW_Icons_64/icon_102040_64.png">030</option>'+
054 '<option value="31" title="../ICONS/BW_Icon/BW_Icons_64/icon_104940_64.png">031</option>'+
055 '<option value="32" title="../ICONS/BW_Icon/BW_Icons_64/icon_107470_64.png">032</option>'+
056 '<option value="33" title="../ICONS/BW_Icon/BW_Icons_64/icon_108510_64.png">033</option>'+
057 '<option value="34" title="../ICONS/BW_Icon/BW_Icons_64/icon_108730_64.png">034</option>'+
058 '<option value="35" title="../ICONS/BW_Icon/BW_Icons_64/icon_111960_64.png">035</option>'+
059 '<option value="36" title="../ICONS/BW_Icon/BW_Icons_64/icon_111970_64.png">036</option>'+
060 '<option value="37" title="../ICONS/BW_Icon/BW_Icons_64/icon_112440_64.png">037</option>'+
061 '<option value="38" title="../ICONS/BW_Icon/BW_Icons_64/icon_112450_64.png">038</option>'+
062 '<option value="39" title="../ICONS/BW_Icon/BW_Icons_64/icon_113000_64.png">039</option>'+
063 '<option value="40" title="../ICONS/BW_Icon/BW_Icons_64/icon_113010_64.png">040</option>'+
064 '<option value="41" title="../ICONS/BW_Icon/BW_Icons_64/icon_114520_64.png">041</option>'+
065 '<option value="42" title="../ICONS/BW_Icon/BW_Icons_64/icon_114530_64.png">042</option>'+
066 '<option value="43" title="../ICONS/BW_Icon/BW_Icons_64/icon_114770_64.png">043</option>'+
067 '<option value="44" title="../ICONS/BW_Icon/BW_Icons_64/icon_114780_64.png">044</option>'+
068 '<option value="45" title="../ICONS/BW_Icon/BW_Icons_64/icon_128020_64.png">045</option>'+
069 '<option value="46" title="../ICONS/BW_Icon/BW_Icons_64/icon_124660_64.png">046</option>'+
070 '<option value="47" title="../ICONS/BW_Icon/BW_Icons_64/icon_127930_64.png">047</option>'+
071 '<option value="48" title="../ICONS/Flat_Icons/s64_f_business_72_0nbg.png">048</option>'+
072 '<option value="49" title="../ICONS/Flat_Icons/s64_f_business_76_0nbg.png">049</option>'+
073 '<option value="50" title="../ICONS/Flat_Icons/s64_f_object_6_2nbg.png">050</option>'+
074 '<option value="51" title="../ICONS/Flat_Icons/s64_f_object_7_2nbg.png">051</option>'+
075 '<option value="52" title="../ICONS/Flat_Icons/s64_f_object_24_1nbg.png">052</option>'+
076 '<option value="53" title="../ICONS/Flat_Icons/s64_f_object_25_0nbg.png">053</option>'+
077 '<option value="54" title="../ICONS/Flat_Icons/s64_f_object_27_2nbg.png">054</option>'+
078 '<option value="55" title="../ICONS/Flat_Icons/s64_f_object_155_1nbg.png">055</option>'+
079 '<option value="56" title="../ICONS/Flat_Icons/s64_f_object_164_2nbg.png">056</option>'+
080 '<option value="57" title="../ICONS/Flat_Icons/s64_f_object_167_0nbg.png">057</option>'+
081 '<option value="58" title="../ICONS/Flat_Icons/s64_f_object_173_0nbg.png">058</option>'+
082 '<option value="59" title="../ICONS/Flat_Icons/s64_f_object_115_0nbg.png">059</option>'+
083 '<option value="60" title="../ICONS/Flat_Icons/s64_f_object_116_1nbg.png">060</option>'+
084 '</select></div><BR>'+
085 '<div><tr><td><BR><div id="num_001"></div><div id="slider_001"></div>'+
086 '<BR><BR><div id="Selected_Icon">Selected Icon: <img src=""></div>'+
087 '</td></tr></div><BR>(注) ここで使用しているアイコン素材は、<A HREF = "http://flat-icon-design.com/" target="_blank"> FLAT ICON DESIGN </A>および' +
088 '<A HREF = "http://icooon-mono.com/" target="_blank"> ICOON MONO </A>から取得しており、<BR>' +
089 'これらアイコン素材データの著作権は TopeconHeroes が保持しています。</p><div>');
090
091 $('#Selected_Icon img').attr('src', Icon_Url);
092
093 $('#dialog_001').dialog({
094 autoOpen: false,
095 title: 'Please Set the Icon Style.',
096 height: 450,
097 width: 300,
098 closeOnEscape: true,
099 modal: true,
100 buttons: {
101 "設定": function(){
102 Set_Text = document.Form_001.txt_mk.value;
103 var Temp = Marker_Samples.options[Marker_Samples.selectedIndex].title;
104 Icon_Url = Temp;
105 Icon_AW = Math.round(Icon_W / 2);
106 Icon_AH = Math.round(Icon_H / 2);
107 Icon_PW = 0;
108 Icon_PH = Math.round(Icon_H / 2) * -1;
109 Change_Marker();
110 $(this).dialog('close');
111 }
112 }
113 });
114
115 $("body").append('<div id="dialog_002" style="z-index: 2000;"><p><form name="Form_002">'+
116 'Title: <input type="text" style="width: 230px;" name="txt_dat" value=""></form></p><HR>'+
117 '<p> File Select:'+
118 '<form name="subinput">'+
119 '<center>CSVファイルを指定してください。<BR><BR>'+
120 ' <TD><input type="file" name="select" id="select_002" value="" onchange="CSV_Data()"></TD>'+
121 ' <BR><BR>'+
122 '</center></form></p></div>');
123
124 $('#dialog_002').dialog({
125 autoOpen: false,
126 title: 'CSVファイル選択',
127 height: 400,
128 width: 300,
129 closeOnEscape: true,
130 modal: true,
131 show: "fade",
132 hide: "fade",
133 buttons: {
134 "Select the Marker": function(){
135 Dialog_001();
136 },
137 "Set Markers": function(){
138 CSV_Markers();
139 },
140 "Close": function(){
141 $(this).dialog('close');
142 }
143 }
144 });
145
146 $("body").append('<div id="dialog_AD_003" style="z-index: 2000;"><p><form name="Form_AD_003">'+
147 'Title: <input type="text" style="width: 230px;" name="txt_file" value=""></form></p><HR>'+
148 '<p> File Select: 写真ファイルを指定してください。'+
149 '<form name="photoinput">'+
150 '<center><TD><input type="file" accept="image/*" name="select_AD" id="select_AD_003" value="" onchange="updateImageDisplay()"></TD>'+
151 ' <BR>'+
152 '<div class="preview"><p>ファイルが選択されていません</p></div></center></form></p></div>');
153
154 $('#dialog_AD_003').dialog({
155 autoOpen: false,
156 title: '写真ファイル選択',
157 height: 400,
158 width: 300,
159 closeOnEscape: true,
160 modal: true,
161 show: "fade",
162 hide: "fade",
163 buttons: {
164 "Set Photo Marker": function(){
165 Photo_Data();
166 },
167 "Close": function(){
168 $(this).dialog('close');
169 }
170 }
171 });
172
173
174 $('#slider_001').slider( {
175 orientation: 'horizontal',
176 range: 'min',
177 max: 255,
178 value: 127,
179 slide: refreshSwatch,
180 change: refreshSwatch
181 } );
182 $( '#slider_001' ).slider( 'value', 96 );
183 $( '#Marker_Samples' ).msDropDown({
184 visibleRows:4,
185 on:{change:function(data, ui) {
186 Icon_Url = Marker_Samples.options[Marker_Samples.selectedIndex].title;
187 $('#Selected_Icon img').attr('src', Icon_Url);
188 }}
189 });
190 });
191
192
193 function Dialog_001() {
194 document.Form_001.txt_mk.value = "";
195 $('#dialog_001').dialog('open');
196 }
197
198 function Dialog_002() {
199 document.Form_002.txt_dat.value = "";
200 document.subinput.select.value = "";
201 $('#dialog_002').dialog('open');
202 }
203
204 function Dialog_Additional_003() {
205 var preview = document.querySelector('.preview');
206 document.Form_AD_003.txt_file.value = "";
207 document.photoinput.select_AD.value = "";
208 while(preview.firstChild){
209 preview.removeChild(preview.firstChild);
210 }
211 $('#dialog_AD_003').dialog('open');
212 }
213
214
215 function refreshSwatch() {
216 Icon_W = Math.round($('#slider_001').slider('value') / 255 * Max_M_Size);
217 if (Icon_W <= Min_M_Size) { Icon_W = Min_M_Size; }
218 Icon_H = Icon_W;
219 $( '#num_001' ).html( 'Marker Size： ' + Icon_W );
220 $( '#Selected_Icon img' ).css( { width: Icon_W, height: Icon_H } );
221 }
222
223 function CSV_Data() {
224 var file_input = $('#select_002');
225 var fileData = file_input[0].files[0];
226
227 Data_CSV = [];
228 var reader = new FileReader();
229 reader.onerror = function() {
230 alert('ファイル読み込みに失敗しました。');
231 }
232 reader.onload = function() {
233 var lineArr = reader.result.split("\r\n");
234 for (var i = 0; i < lineArr.length; i++) {
235 Data_CSV[i] = lineArr[i].split(",");
236 }
237 }
238 reader.readAsText(fileData);
239 }
240
241 function Photo_Data() {
242 var Temp_Lat;
243 var Temp_Lon;
244 var Temp_Date;
245 var Temp_Name;
246 var Temp_Pos;
247 var NSEW;
248 var image = document.createElement('img');
249 image.src = window.URL.createObjectURL(file);
250 var photoIcon_01 = L.divIcon({className: 'imageCover1', html: "<img src='" + image.src + "' alt='写真' class='baseImage'> <img src='../ICONS/Photo_Frame_214.png' alt='アイコン' class='coverImage'>"});
251 var photoIcon_02 = L.divIcon({className: 'imageCover2', html: "<img src='" + image.src + "' alt='写真' class='baseImage'> <img src='../ICONS/Photo_Frame_215.png' alt='アイコン' class='coverImage'>"});
252
253 EXIF.getData(file, function() { // EXIF.getDataでexif情報を解析
254 Temp_Pos = EXIF.getTag(this, "GPSLatitude"); // EXIF.getTag(this, "[exifのタグ名]")で、値を取得
255 if(image.naturalWidth >= image.naturalHeight) {
256 photoIcon = photoIcon_01;
257 } else {
258 photoIcon = photoIcon_02;
259 }
260 if( Temp_Pos === undefined ) {
261 alert("写真の位置情報はありません！\n" + "マーカーは任意の位置に移動できます。");
262 Photo_Data_Set();
263 } else {
264 Temp_Pos = EXIF.getTag(this, "GPSLatitude");
265 NSEW = EXIF.getTag(this, "GPSLatitudeRef");
266 if(NSEW == "N") {
267 Temp_Lat = Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60;
268 } else {
269 Temp_Lat = (Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60) * -1.0;
270 }
271 Temp_Pos = EXIF.getTag(this, "GPSLongitude");
272 NSEW = EXIF.getTag(this, "GPSLongitudeRef");
273 if(NSEW == "E") {
274 Temp_Lon = Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60;
275 } else {
276 Temp_Lon = (Temp_Pos[0] + Temp_Pos[1]/60 + Temp_Pos[2]/60/60) * -1.0;
277 }
278 Temp_Date = EXIF.getTag(this, "DateTimeOriginal");
279 Temp_Name = file.name;
280 Photo_Marker_LAT[ Photo_Marker_count ] = Temp_Lat;
281 Photo_Marker_LON[ Photo_Marker_count ] = Temp_Lon;
282 Photo_Marker_NAM[ Photo_Marker_count ] = Temp_Date + "の写真";
283 Photo_Marker_LNK[ Photo_Marker_count ] = file;
284 Photo_Marker_ICN[ Photo_Marker_count ] = photoIcon;
285 Photo_Marker_ID[ Photo_Marker_count ] = "Photo" + Photo_Marker_ID_count;
286 Photo_Marker_Drag_flag[ Photo_Marker_count ] = false;
287 Photo_Marker_Drag_info[ Photo_Marker_count ] = "マウスで移動出来ません。";
288 Temp = Photo_Marker_count;
289 Photo_Marker_Setting();
290 Photo_Marker_Set();
291 Layer_AD004[ Temp ] = Temp_shape;
292 Layer_AD004[ Temp ].addTo(map_AD004);
293 Layer_AD004_clone[ Temp ] = Temp_shape_clone;
294 Layer_AD004_clone[ Temp ].addTo(map_AD004);
295 Photo_Marker_count = Photo_Marker_count + 1;
296 Photo_Marker_ID_count = Photo_Marker_ID_count + 1;
297 }
298 });
299 }
300
301 function Photo_Data_Set() {
302 var Temp_Lat = map_AD004.getCenter().lat;
303 var Temp_Lon = map_AD004.getCenter().lng;
304 var Temp_Name;
305 var image = document.createElement('img');
306 image.src = window.URL.createObjectURL(file);
307 Temp_Name = file.name;
308 Photo_Marker_LAT[ Photo_Marker_count ] = Temp_Lat;
309 Photo_Marker_LON[ Photo_Marker_count ] = Temp_Lon;
310 Photo_Marker_NAM[ Photo_Marker_count ] = Temp_Name + "の写真";
311 Photo_Marker_LNK[ Photo_Marker_count ] = file;
312 Photo_Marker_ICN[ Photo_Marker_count ] = photoIcon;
313 Photo_Marker_ID[ Photo_Marker_count ] = "Photo" + Photo_Marker_ID_count;
314 Photo_Marker_Drag_flag[ Photo_Marker_count ] = true;
315 Photo_Marker_Drag_info[ Photo_Marker_count ] = "マウスで移動出来ます。";
316 Temp = Photo_Marker_count;
317 Photo_Marker_Setting();
318 Photo_Marker_Set();
319 Layer_AD004[ Temp ] = Temp_shape;
320 Layer_AD004[ Temp ].addTo(map_AD004);
321 Layer_AD004_clone[ Temp ] = Temp_shape_clone;
322 Layer_AD004_clone[ Temp ].addTo(map_AD004);
323 Photo_Marker_count = Photo_Marker_count + 1;
324 Photo_Marker_ID_count = Photo_Marker_ID_count + 1;
325 }
326
327 function updateImageDisplay() {
328 var preview = document.querySelector('.preview');
329 var file_input = $('#select_AD_003');
330 file = file_input[0].files[0];
331 var para = document.createElement('p');
332 if(file === undefined) {
333 para.textContent = 'ファイルが選択されていません！';
334 preview.removeChild(preview.childNodes.item(0));
335 preview.appendChild(para);
336 } else {
337 para.textContent = 'ファイル名： ' + file.name;
338 while(preview.firstChild){
339 preview.removeChild(preview.firstChild);
340 }
341 preview.appendChild(para);
342 var image = document.createElement('img');
343 image.src = window.URL.createObjectURL(file);
344 preview.appendChild(image);
345 }
346 }
Previous Page Go to Menu